<template>
  <div id="singers" v-if="this.artistList">
    <el-row style="border-left:1px solid #ccc;padding-left:10px">
      <!-- 左边部分 -->
      <el-col  :span="4" class="left">
        <div class="grid-content">
          <!-- 推荐 -->
          <div class="recommend">
            <h2 class="tit">推荐</h2>
            <ul>
              <li>
                <a href="#/discover/artist" @click="classify(type[0],area[0],'','推荐歌手')">推荐歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[0],area[0],'','入驻歌手')">入驻歌手</a>
              </li>
            </ul>
            <hr />
          </div>
          <!-- 华语 -->
          <div class="chinese">
            <h2 class="tit">华语</h2>
            <ul>
              <li>
                <a href="#/discover/artist" @click="classify(type[1],area[1],'','华语男歌手')">华语男歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[2],area[1],'','华语女歌手')">华语女歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[3],area[1],'','华语组合/乐队')">华语组合/乐队</a>
              </li>
            </ul>
            <hr />
          </div>
          <!-- 欧美 -->
          <div class="chinese">
            <h2 class="tit">欧美</h2>
            <ul>
              <li>
                <a href="#/discover/artist" @click="classify(type[1],area[2],'','欧美男歌手')">欧美男歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[2],area[2],'','欧美女歌手')">欧美女歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[3],area[2],'','欧美组合/乐队')">欧美组合/乐队</a>
              </li>
            </ul>
            <hr />
          </div>
          <!-- 日本 -->
          <div class="chinese">
            <h2 class="tit">日本</h2>
            <ul>
              <li>
                <a href="#/discover/artist" @click="classify(type[1],area[3],'','日本男歌手')">日本男歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[2],area[3],'','日本女歌手')">日本女歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[3],area[3],'','日本组合/乐队')">日本组合/乐队</a>
              </li>
            </ul>
            <hr />
          </div>
          <!-- 韩国 -->
          <div class="chinese">
            <h2 class="tit">韩国</h2>
            <ul>
              <li>
                <a href="#/discover/artist" @click="classify(type[1],area[4],'','韩国男歌手')">韩国男歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[2],area[4],'','韩国女歌手')">韩国女歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[3],area[4],'','韩国组合/乐队')">韩国组合/乐队</a>
              </li>
            </ul>
            <hr />
          </div>
          <!-- 其他 -->
          <div class="chinese">
            <h2 class="tit">其他</h2>
            <ul>
              <li>
                <a href="#/discover/artist" @click="classify(type[1],area[5],'','其他男歌手')">其他男歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[2],area[5],'','其他女歌手')">其他女歌手</a>
              </li>
              <li>
                <a href="#/discover/artist" @click="classify(type[3],area[5],'','其他组合/乐队')">其他组合/乐队</a>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <!-- 右边部分 -->
      <el-col :span="20" class="right">
        <div class="grid-content rigth">
          <h2>
            {{headline}}
            <a href="#/discover/artist" class="gd" @click="classify(type[0],area[0],'','入驻歌手')">更多</a>
            <hr class="hr" />
          </h2>
          <!-- 分类 -->
          <ul>
            <li v-for="(item,index) in screen" :key="index">
              <a @click="initialClassify(item)">{{item}}</a>
            </li>
          </ul>
          <!-- 图片 -->
          <ul v-if="firstShowUl">
            <li v-for="(item,index) in artistList" :key="index" style="width:130px">
              <router-link :to="'/discover/songerInfo/id='+item.id" style="width:130px">
                <img :src="item.img1v1Url+'?param=130y130'" :title="item.name+'的音乐'" />
              </router-link>
              <!-- <a href="#" style="width:130px">{{item.name}}</a> -->
              <router-link
                :to="'/discover/songerInfo/id='+item.id"
                style="width:130px"
              >{{item.name}}</router-link>
            </li>
          </ul>
          <hr style=" border: none;border-bottom: 2px dotted #ccc;" />
          <!-- 所有歌手姓名 -->
          <ul class="ul">
            <li v-for="(item,index) in artistids" :key="index" style="width:130px">
              <!-- <a href="#" style="width:130px" >{{item.name}}</a> -->
              <router-link
                :to="'/discover/songerInfo/id='+item.id"
                style="width:130px"
              >{{item.name}}</router-link>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Singers",
  data() {
    return {
      //标题
      headline: "推荐歌手",
      //分类
      screen: [
        "热门",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "其它"
      ],
      //获取api中的歌手数据
      artists: [],
      //需要显示图片的歌手数据
      artistList: [],
      //不需要显示图片的歌手数据
      artistids: [],
      // ***********************************************************
      //全部/男/女/乐队
      type: ["-1", "1", "2", "3"],
      ty: "",
      //-1:全部/7:华语/96:欧美/8:日本/16:韩国/0:其他
      area: ["-1", "7", "96", "8", "16", "0"],
      ar: "",
      //控制例表加载标识
      firstShowUl: false
    };
  },
  methods: {
    //获取歌手数据
    seach(type, area, initial) {
      this.firstShowUl = false;
      //initial 首字母, limit 返回的数量, offset 索引
      axios
        .get(
          //  "https://api.imjad.cn/cloudmusic/?type=artist&id=" + element.id
          "https://autumnfish.cn//artist/list?type=" +
            type +
            "&area=" +
            area +
            "&initial=" +
            initial +
            "&limit=100"
        )
        .then(input => {
          this.artistList = [];
          this.artistids = [];
          this.artists = input.data.artists;
          if (this.headline == "入驻歌手") {
            for (let index = 0; index < this.artists.length; index++) {
              if (index < 50) {
								if(index>5){
								this.firstShowUl = true;
								}
                this.artistList.push(this.artists[index]);
              } else {
                this.artistids.push(this.artists[index]);
              }
            }
          } else {
            for (let index = 0; index < this.artists.length; index++) {
              if (index < 10) {
                this.artistList.push(this.artists[index]);
                
              } else {
								this.firstShowUl = true;
                this.artistids.push(this.artists[index]);
              }
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //左侧筛选
    classify(type, area, initial, title) {
      this.headline = title;
      this.seach(type, area, initial);
    },
    //首字母筛选
    initialClassify(item) {
      if (item == "热门") {
        this.seach(this.ty, this.ar, "");
      } else if (item == "其它") {
        this.seach(this.ty, this.ar, 0);
      } else {
        this.seach(this.ty, this.ar, item);
      }
    }
  },

  computed: {},

  mounted() {
    this.seach(-1, -1, "");
  }
};
</script>